<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/denglu.css">
    <link rel="shortcut icon" href="images/title-logo.jpg">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <img src="images\tencent.png" alt="">
    <div class="main">
        <table class="table">
            <h1>用户登录</h1>
            <tr>
                <td><label for="username">用户名:</label></td>
                <td><input class="input" type="text" name="username" placeholder="请输入用户名,由数字和字母组成,长度为11位" id="username">
                    <span id="app" v-if="boll">请输入正确的用户名</span>
                </td>
            </tr>
            <tr>
                <td><label for="password">密码:</label></td>
                <td><input class="input" type="text" name="password" placeholder="请输入密码,由数字和字母组成,长度大于8位" id="password">
                    <span id="app2" v-if="boll2">请输入正确的密码</span>
                </td>
            </tr>

            <div class="enroll"><a href="login.html">没有账号?创建账号</a></div>


            <div><button class="sumbit"><span>登录</span></button></div>
        </table>
    </div>

    <script type="text/javascript" src="js/denglu.js"></script>
    <!-- <script>


        const sumbit = document.querySelector('.sumbit')
        sumbit.addEventListener('click', function () {
            let username = document.querySelector('#username')
            let password = document.querySelector('#password')
            username = username.value
            password = password.value
            let boller = false
            let boller2 = false
            let password_t = localStorage.getItem('password')
            let username_t = localStorage.getItem('uname')
            let sum = 0;
            if (username.length != username_t.length) {

            }
            else {

                for (let i = 0; i < username.length; i++) {

                    if (username[i] == username_t[i]) {
                        sum++
                    }
                }
            }
            if (sum == username_t.length) {
                boller = true
            }
            sum = 0;
            if (password.length != password_t.length) {

            }
            else {

                for (let i = 0; i < password.length; i++) {
                    if (password[i] == password_t[i]) {
                        sum++
                    }
                }
            }
            if (sum == password_t.length) {
                boller2 = true
            }
            // if (boller && boller2) {
            //     alert("登录成功，即将跳转到首页")
            //     // window.location.href = 'file:///E:/%E6%A1%8C%E9%9D%A2/javascript%E8%AE%BE%E8%AE%A1/denglu.html';
            // }
            // else
            if (!(boller && boller2)) {
                if (boller == false) {
                    alert("用户名错误")
                    console.log(boller)
                    document.querySelector('#username').placeholder = "用户名错误"
                }
                else {
                    let app = new Vue({
                        el: "#app",
                        data: {
                            boll: false,
                        }
                    })
                    alert("密码错误")
                    document.querySelector('#password').placeholder = "密码错误"
                }
                if (boller2) {
                    let app2 = new Vue({
                        el: "#app2",
                        data: {
                            boll2: false,
                        }
                    })
                }
            }
            if (boller && boller2) {
                alert("登录成功，即将跳转到首页")
                // window.location.href = 'file:///E:/%E6%A1%8C%E9%9D%A2/javascript%E8%AE%BE%E8%AE%A1/denglu.html';
            }
        })
    </script> -->
</body>

</html>